<template>
  <div>
    <r-search :searchForm="searchForm" :searchHandle="searchHandle" :searchData="searchData" />
    <r-table :isSelection="false" :isIndex="false" :isPagination="true" :isHandle="true" :tableData="tableData"
      :tableCols="tableCols" :tablePage="tablePage" :tableHandles="tableHandles" @refresh="init()">

    </r-table>

    <r-form labelWidth="150px" :isHandle="true" :formRules="formRules" :formCols="formCols" :formHandle="formHandle"
      :formData="formData" ref="elForm" :inline="false" dialogWidth="850px">
      <!--            <div :slot="'door'+(index+1)" v-for="(item,index) in callLists" :key="index">-->
      <!--                <span v-for="(item2,index2) in item" :key="index2" style="margin-right:10px;margin-bottom:10px;float:left;cursor: pointer;">-->
      <!--                    <el-tag @click="callClick(item2,index)" :type="item2.type">{{index2+1}}号称</el-tag>-->
      <!--                </span>-->
      <!--            </div>-->
      <!-- 点击编辑按钮出现的模板，里面的站点地址 -->
      <!-- 省 -->
      <div class="zhandiandiz" v-if="isshowss"><span>省/市/区/街</span>
        <el-select v-model="sValue" placeholder="请选择省份" @change="sZhandiandizhi($event)" class="szddz">
          <el-option v-for="item in sOption" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <!-- 市 -->
        <el-select v-model="cValue" placeholder="请选择城市" @change="cZhandiandizhi($event)" class="czddz">
          <el-option v-for="item in cOption" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <!-- 区 -->
        <el-select v-model="qValue" placeholder="请选择区/县" @change="qZhandiandizhi($event)" class="qzddz">
          <el-option v-for="(item,index) in qOption" :key="index" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <!-- 街 -->
        <el-select v-model="jValue" placeholder="请选择街道" @change="jZhandiandizhi($event)" class="jzddz">
          <el-option v-for="(item,index) in jOption" :key="index" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div slot="slot3">
        <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
        <p>点击地图确认坐标 经度：{{formData.lng}} 纬度：{{formData.lat}}</p>
        <div id="l-map"></div>
      </div>

    </r-form>
    <r-form :formRules="formRulesEditPsw" :formHandle="formHandleEditPsw" :formData="formDataEditPsw"
      :formCols="formColsEditPsw" ref="elFormEditPsw" labelWidth="200px" dialogWidth="1000px" :isHandle="true" />
    <r-form :formRules="formRulesActive" :formHandle="formHandleActive" :formData="formDataActive"
      :formCols="formColsActive" ref="elFormActive" labelWidth="200px" dialogWidth="1000px" :isHandle="true" />

  </div>
</template>

<script>
  import baidumap from "../js/baidumap";
  export default {
    data() {
      var checkpass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.formData.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      var checkpass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.formDataEditPsw.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        pt: '116.331398, 39.897445',
        isshowss: false,//控制省市区街显示隐藏
        sValue: '',   //编辑页面 站点地址 选项的值(省)
        sLabel: '',   //编辑页面 站点地址 选项的键名(省)
        sJingwei: '',   //编辑页面 站点地址 选项的经纬度(省)
        sOption: [], //编辑页面 站点地址 数据源(省)
        cValue: '',   //编辑页面 站点地址 选项的值(市)
        cLabel: '',   //编辑页面 站点地址 选项的键名(市)
        cJingwei: '',   //编辑页面 站点地址 选项的经纬度(市)
        cOption: [], //编辑页面 站点地址 数据源(市)
        qValue: '',   //编辑页面 站点地址 选项的值(区)
        qLabel: '',   //编辑页面 站点地址 选项的键名(区)
        qJingwei: '',   //编辑页面 站点地址 选项的经纬度(区)
        qOption: [], //编辑页面 站点地址 数据源(区)
        jValue: '',   //编辑页面 站点地址 选项的值(街道)
        jLabel: '',   //编辑页面 站点地址 选项的键名(街道)
        jJingwei: '',   //编辑页面 站点地址 选项的经纬度(街道)
        jOption: [], //编辑页面 站点地址 数据源(街道)
        baiduMap: null,
        //
        searchData: {
          name: '',
          phone: '',
          contacts: '',
          address: '',
        },
        searchForm: [
          {
            type: 'input',
            prop: 'name',
            placeholder: '代理商名称',
            width: 170
          },
          {
            type: 'input',
            prop: 'address',
            placeholder: '代理商地址',
            width: 150
          },
          {
            type: 'input',
            prop: 'contacts',
            placeholder: '联系人',
            width: 150
          },
          {
            type: 'input',
            prop: 'phone',
            placeholder: '手机号',
            width: 150
          },

        ],

        searchHandle: [
          {
            label: '搜索',
            type: 'success',
            icon: 'el-icon-search',
            handle: e => this.init()
          }
        ],

        tableHandles: [
          {
            label: "添加代理商",
            type: "primary",
            handle: e => {
              this.formData.id = null;
              this.isshowss = true;
              this.createdAcc()
            }
          },
        ],
        tableData: [{}],
        tableCols: [
          {
            label: '序号',
            prop: 'id'
          },
          {
            label: '代理商名称',
            prop: 'name'
          },
          {
            label: '代理商地址',
            prop: 'address'
          },
          {
            label: '登录账号',
            prop: 'account'
          },
          {
            label: '联系人',
            prop: 'contacts'
          },
          {
            label: '手机号',
            prop: 'phone'
          },
          {
            label: '设备信息',
            prop: 'totalRevenue'
          },
          {
            label: '分成比列',
            prop: 'withdrawMoney',
            type: 'html',
            html: (row) => {
              let html = '' +
                '<p>充电：' + row.proportionCd + '%</p>'
                + '<p>换电：' + row.proportionHd + '%</p>'
                + '<p>租车：' + row.proportionZc + '%</p>';

              return html;
            }
          },
          {
            label: '站点数量',
            type: 'html',
            html: (row) => {
              let html = '<p>' +
                (row.params && row.params.siteNum)
                + '</p>'
              return html
            }
          },
          {
            label: '更新时间',
            prop: 'updateTime'
          },
          {
            label: '启用状态',
            prop: 'state',
            formatter: e => e.state == 1 ? '启用' : '禁用',
            theme: e => e.state == '1' ? 'primary' : 'danger',
            type: "tag",
          },
          {
            label: "操作",
            type: "button",
            width: 200,
            btnList: [
              {
                label: '编辑',
                type: 'primary',
                handle: (row) => {
                  this.isshowss = false
                  this.createdAcc(row)
                },
              },
              {
                label: '删除',
                type: 'primary',
                handle: (row) => this.del(row)
              },
            ]
          },

        ],
        tablePage: { limit: 10, page: 1, total: 0 },
        formData: {
          name: "",
          contacts: "",
          phone: '',
          account: "",
          password: "",
          address: "",
          proportionCd: '',
          proportionHd: '',
          proportionZc: '',
          lng: '',
          lat: '',


        },
        formCols: [
          { type: "input", label: "代理商名称", placeholder: '请输入代理商名称', width: 350, prop: "name", },
          { type: "input", label: "联系人", placeholder: '请输入', width: 350, prop: "contacts", },
          { type: "input", label: "手机号", placeholder: '请输入联系方式', width: 350, prop: "phone", },
          { type: "input", label: " 登录账号", placeholder: '请输入登录账号', width: 350, prop: "account" },
          {
            type: "input", isShow: () => {
              return this.formData.id ? true : true
            }, label: " 密码", placeholder: '请输入密码', width: 350, prop: "password"
          },
          // {                    type: "input", isShow: () => {
          //         return this.formData.id ? false : true
          //     }, label: "确认密码", placeholder: '请再次确认密码', width: 350, prop: "enterPassword"},
          // { type: "textarea", label: "备注", placeholder: '请输入备注', width: 350, prop: "remark" },
          { type: "input", label: "充电订单分成比例", placeholder: '请输入', width: 350, prop: "proportionCd", remark: '%' },
          { type: "input", label: "换电订单分成比例", placeholder: '请输入', width: 350, prop: "proportionHd", remark: '%' },
          { type: "input", label: "租车订单分成比例", placeholder: '请输入', width: 350, prop: "proportionZc", remark: '%' },
          { //只有新增才有，编辑没有
            type: "", isShow: () => { return !this.formData.id ? true : false; }
          },
          { type: "input", id: 'suggestId', label: "代理商地址", width: 350, prop: "address" },
          { type: "slot", name: 'slot3', label: '', prop: "lng" },
        ],
        formRules: {
          name: [
            { required: true, message: '请输入', trigger: 'blur' },
          ],
          contacts: [
            { required: true, message: '请输入', trigger: 'blur' },
          ],
          phone: [
            { required: true, message: '请输入联系方式', trigger: 'blur' },
          ],
          account: [
            { required: true, message: '请输入登录账号', trigger: 'blur' },
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
          ],

          proportionCd: [
            { required: true, message: '请输入', trigger: 'blur' },
          ],
          proportionHd: [
            { required: true, message: '请输入', trigger: 'blur' },
          ],
          proportionZc: [
            { required: true, message: '请输入', trigger: 'blur' },
          ],
          lng: [
            { required: true, message: '请点击地图选择经纬度', trigger: 'blur' },
          ],
          address: [
            { required: true, message: '请输入', trigger: 'blur' },
          ]
        },
        formHandle: [
          {
            label: "取消",
            handle: e => this.elFormVisible(),
          },
          {
            label: "确定",
            type: "success",
            handle: e => this.elFormSubmit(),
          },

        ],
        //密码
        formDataEditPsw: {
          password: "",
          enterPassword: "",
        },
        formColsEditPsw: [
          { type: "input", label: " 密码", placeholder: '请输入密码', width: 350, prop: "password" },
          { type: "input", label: "确认密码", placeholder: '请输入确认密码', width: 350, prop: "enterPassword" },
        ],
        formRulesEditPsw: {
          password: [
            { required: true, message: '密码', trigger: 'blur' },
          ],
          enterPassword: [
            { required: true, validator: checkpass2, message: '请确认两次密码是否一致', trigger: 'blur' },
          ],
        },
        formHandleEditPsw: [
          {
            label: "取消",
            handle: e => this.elFormVisibleEditPsw(),
          },
          {
            label: "确定",
            type: "success",
            handle: e => this.elFormSubmitEditPsw(),
          },

        ],
        //禁用恢复
        formDataActive: {
          isActive: "",
        },
        formRulesActive: {
        },
        formColsActive: [
          { label: "是否禁用/恢复选定账号", width: 350, prop: "isActive" },
          // { type: "input", label: "确认密码", placeholder: '请输入确认密码', width: 350, prop: "enterPassword" },
        ],
        formHandleActive: [
          {
            label: "取消",
            handle: e => this.elFormVisibleActive(),
          },
          {
            label: "确定",
            type: "primary",
            handle: e => this.elFormSubmitActive(),
          },
        ],
        checkBox: [],

      };

    },
    created() { },
    mounted() {
      this.setCall(20, 2);
      this.init()
    },
    methods: {
      async init() {
        let param = {
          ...this.searchData, ...{
            pageNum: this.tablePage.page,
            pageSize: this.tablePage.limit
          }
        }
        let res = await this.apis.agent_list(param)

        if (res) {
          this.tableData = res.rows || []
          this.tablePage.total = res.total;
        }
        // 编辑页面 站点地址  ---拿到省份(数据)
        const addressRes = await this.apis.allAddressList({});
        if (addressRes.code === 0) {
          var array = new Array();
          addressRes.result.forEach((item) => {
            let obj = {
              label: item.name,
              value: item.adcode,
              jingwei: item.center,
            }
            this.sOption.push(obj)
            array.push(obj)
          })

          this.formCols[this.labIndex2(this.formCols, "address")].options = array;
        }

      },
      setCall(callNum, doorNum) {
        var arr = [];
        for (var i = 0; i < doorNum; i++) {
          var arr2 = [];
          for (var j = 0; j < callNum; j++) {
            arr2.push({
              type: 'info',
              status: 1,
              id: j + 1
            });
          }
          arr.push(arr2);
        }
        this.callLists = arr;
      },
      callClick(item, index) {
        console.log(item);
        console.log(index);
        for (var i = 0; i < this.callLists.length; i++) {

        }
        item.type = 'success';
      },
      map() {
        var that = this;
        var map = baidumap(that);
        this.baiduMap = map;
        var geoc = new BMap.Geocoder();
        map.addEventListener("click", function (e) {
          that.formData.lng = e.point.lng;
          that.formData.lat = e.point.lat;
          var pt = e.point;
          geoc.getLocation(pt, function (rs) {
            that.formData.address = rs.address;//点击地图拿到详细地址
            var addComp = rs.addressComponents;
            // that.formData.city = addComp.city;
            // alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
          });

        });
        map.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用
        map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve();
          }, 10)
        })
      },
      createdAcc(row) {
        if (row) {
          this.formData.id = row.id;
          this.formRules.password[0].required = false;
        } else {
          this.formData.id = '';
          this.formRules.password[0].required = true;
        }
        this.elFormVisible().then(res => {
          this.map().then(res => {
            if (row) {
              Object.keys(this.formData).forEach(key => {
                this.formData[key] = row[key]
              });

              this.formData.password = ''
            }
          });
        })

      },
      elFormSubmit() {
        this.$refs.elForm.$refs.ruleForm.validate(async (valid) => {
          if (valid) {
            if (this.formData.id) {
              let res = await this.apis.agent_updata(this.formData)
              if (res) {
                this.init()
                this.elFormVisible()
              }
            } else {
              let res = await this.apis.agent_save(this.formData)
              if (res) {
                this.init()
                this.elFormVisible()
              }
            }

          }
        });
      },
      elFormDetail(row) {

        // this.elFormVisible()
      },
      elFormDetailEditPsw(row) {
        Object.keys(this.formDataEditPsw).forEach(key => {
          this.formDataEditPsw[key] = row[key]
        })
        this.formDataEditPsw.id = row.id;
        this.formDataEditPsw.password = ''
        this.formDataEditPsw.name = row.name;
        this.formDataEditPsw.phone = row.phone;
        this.formDataEditPsw.address = row.address;
        this.formDataEditPsw.longitude = row.longitude;
        this.formDataEditPsw.latitude = row.latitude;
        this.formDataEditPsw.proportion = row.proportion;
        this.elFormVisibleEditPsw()
      },
      elFormVisibleEditPsw(tit) {
        if (this.$refs.elFormEditPsw.$refs.ruleFormEditPsw) {
          this.$refs.elFormEditPsw.$refs.ruleFormEditPsw.resetFields()
          this.$data.formDataEditPsw = this.$options.data.call(this).formDataEditPsw;
        }
        this.$refs.elFormEditPsw.dialogFormVisible = !this.$refs.elFormEditPsw.dialogFormVisible
        this.$refs.elFormEditPsw.dialogFormTitle = tit ? tit : this.formDataEditPsw.id ? '编辑' : '新增'

        if (this.$refs.elFormEditPsw.dialogFormVisible) {
          return new Promise((resolve, reject) => {
            setTimeout(() => {
              resolve();
            }, 2000)
          })
        }
      },
      async elFormSubmitEditPsw() {
        let res = await this.api.regionedit(this.formDataEditPsw)
        if (res) {
          this.init()
          this.elFormVisibleEditPsw()
        }
      },
      elFormDetailActive(row) {
        Object.keys(this.formDataActive).forEach(key => {
          this.formDataActive[key] = row[key]
        })
        this.formDataActive.id = row.id;
        this.elFormVisibleActive()
      },
      elFormVisibleActive(tit) {
        if (this.$refs.elFormActive.$refs.ruleFormActive) {
          this.$refs.elFormActive.$refs.ruleFormActive.resetFields()
          this.$data.formDataActive = this.$options.data.call(this).formDataActive;
        }
        this.$refs.elFormActive.dialogFormVisible = !this.$refs.elFormActive.dialogFormVisible
        this.$refs.elFormActive.dialogFormTitle = tit ? tit : this.formDataActive.id ? '编辑' : '新增'

        if (this.$refs.elFormActive.dialogFormVisible) {
          return new Promise((resolve, reject) => {
            setTimeout(() => {
              resolve();
            }, 2000)
          })
        }

      },
      async elFormSubmitActive() {
        // console.log(this.formDataActive.id);
        let res = await this.api.regionchange(this.formDataActive)
        if (res) {
          this.init()
          this.elFormVisibleActive()
        }
      },


      del(row) {
        this.$confirm('确定要删除吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          var res = await this.apis.agent_delete({
            id: row.id
          });
          if (res.code == 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          } else {
            this.$message({
              type: 'error',
              message: res.msg
            });
          }
          this.init();
        }).catch(() => {

        });
      },
      // // 编辑页面 站点地址 的点击方法(省)
      sZhandiandizhi(value) {
        // console.log(value);
        let sObj = {};
        sObj = this.sOption.find((item) => {//这里的sOption就是上面遍历的数据源
          return item.value === value;//筛选出匹配数据
        });
        this.sLabel = sObj.label //拿到键名
        this.sOption.find((item) => {//经纬度
          if (item.value === value) {
            this.sJingwei = item.jingwei
          }
        });
        //拿到后端返回的经纬度，赋值给地图上的经纬度
        this.formData.lng = this.sJingwei.split(",")[0]
        this.formData.lat = this.sJingwei.split(",")[1]
        this.pt = this.sJingwei

      },

      // // 编辑页面 站点地址 的点击方法(市)
      cZhandiandizhi(value) {
        // console.log(value);
        let cObj = {};
        cObj = this.cOption.find((item) => {//这里的cOption就是上面遍历的数据源
          return item.value === value;//筛选出匹配数据
        });
        this.cLabel = cObj.label //拿到键名
        this.cOption.find((item) => {//经纬度
          if (item.value === value) {
            this.cJingwei = item.jingwei
          }
        });
        //拿到后端返回的经纬度，赋值给地图上的经纬度
        this.formData.lng = this.cJingwei.split(",")[0]
        this.formData.lat = this.cJingwei.split(",")[1]
        this.pt = this.cJingwei



      },
      // // 编辑页面 站点地址 的点击方法(区)
      qZhandiandizhi(value) {
        let qObj = {};
        qObj = this.qOption.find((item) => {//这里的cOption就是上面遍历的数据源
          return item.value === value;//筛选出匹配数据
        });
        this.qLabel = qObj.label //拿到键名
        this.qOption.find((item) => {//经纬度
          if (item.value === value) {
            this.qJingwei = item.jingwei
          }
        });
        //拿到后端返回的经纬度，赋值给地图上的经纬度
        this.formData.lng = this.qJingwei.split(",")[0]
        this.formData.lat = this.qJingwei.split(",")[1]
        this.pt = this.qJingwei
      },

      // // 编辑页面 站点地址 的点击方法(街道)
      jZhandiandizhi(value) {

        let jObj = {};
        jObj = this.jOption.find((item) => {//这里的jOption就是上面遍历的数据源
          return item.value === value;//筛选出匹配数据
        });
        this.jLabel = jObj.label //拿到键名
        console.log(this.jLabel);
        this.jOption.find((item) => {//经纬度
          if (item.value === value) {
            this.jJingwei = item.jingwei
          }
        });
        //拿到后端返回的经纬度，赋值给地图上的经纬度
        this.formData.lng = this.jJingwei.split(",")[0]
        this.formData.lat = this.jJingwei.split(",")[1]
        this.pt = this.jJingwei
      },

      // // 编辑页面地图 ---拿到城市（数据）
      czhandianfangfa(label, value) {
        this.cOption = [] //每次进来先清空城市的数据源
        this.apis.allAddressList({
          name: label,
          code: value,
        }).then((res) => {
          if (res.code === 0) {
            console.log(res);
            res.result.forEach((item) => {
              let obj = {
                label: item.name,
                value: item.adcode,
                jingwei: item.center
              }
              this.cOption.push(obj)
            })
            console.log('市', this.cOption);
          }
        })
      },

      // // 编辑页面地图 ---拿到区（数据）
      qzhandianfangfa(label, value) {
        this.qOption = [] //每次进来先清空区/县的数据源
        this.apis.allAddressList({
          name: label,
          code: value,
        }).then((res) => {
          if (res.code === 0) {
            res.result.forEach((item) => {
              let obj = {
                label: item.name,
                value: item.adcode,
                jingwei: item.center,
              }
              this.qOption.push(obj)
            })
            console.log('区', this.cOption);
          }
        })
      },
      // // 编辑页面地图 ---拿到街道（数据）
      jzhandianfangfa(label, value) {
        this.jOption = [] //每次进来先清空街道的数据源
        this.apis.allAddressList({
          name: label,
          code: value,
        }).then((res) => {
          if (res.code === 0) {
            console.log(res);
            // 增加判断，如果镇下面没有街道，就直接让街道变成空
            if (res.result.length !== 0) {
              res.result.forEach((item) => {
                let obj = {
                  label: item.name,
                  value: item.adcode,
                  jingwei: item.center,
                }
                this.jOption.push(obj)
              })
            } else {
              this.jOption = []
            }
            console.log('街', this.jOption);
          }
        })
      },
    },
    watch: {
      // 监听省，如果下拉框的省发生改变，就会发送请求，更新市的数据
      sLabel(newV, oldV) {
        if (newV !== oldV) {
          // 调用编辑页面 --站点地址-- 城市（数据） 的方法
          this.czhandianfangfa(this.sLabel, this.sValue)
          // 当重新选择省，市区街和站点地址情况，重新更新
          this.cLabel = ''
          this.qLabel = ''
          this.jLabel = ''
          this.cValue = ''
          this.qValue = ''
          this.jValue = ''
        };
      },
      // 监听市，如果下拉框的市发生改变，就会发送请求，更新区的数据
      cLabel(newV, oldV) {
        if (newV !== oldV) {
          // 调用编辑页面 --站点地址-- 区（数据） 的方法
          this.qzhandianfangfa(this.cLabel, this.cValue)
          // 当重新选择市，区街和站点地址情况，重新更新
          this.qLabel = ''
          this.jLabel = ''
          this.qValue = ''
          this.jValue = ''
        }
      },
      // 监听区，如果下拉框的区发生改变，就会发送请求，更新街道的数据
      qLabel(newV, oldV) {
        if (newV !== oldV) {
          // 调用编辑页面 --站点地址-- 街道（数据） 的方法
          this.jzhandianfangfa(this.qLabel, this.qValue)
          // 当重新选择区，街和站点地址情况，重新更新

          this.jLabel = ''
          this.jValue = ''
        }
      },
      // 监听街道，如果下拉框的街道发生改变，就会发送请求，更新街道的数据
      jValue(newV, oldV) {

        console.log(111111, newV, oldV);
        if (newV !== oldV) {
          // this.jLabel = ''
          // this.jValue = ''
          // 调用编辑页面 --站点地址-- 街道（数据） 的方法
          // this.jzhandianfangfa(this.qLabel, this.qValue)
        }
      },
      lng(newV, oldV) {
        if (newV !== oldV) { console.log(newV, oldV, '==============='); }
      }

    },
    updated() {

      // 选择省市区街下拉框，编辑页面的站点地址会改变
      if (this.sLabel && !this.cLabel && !this.qLabel && !this.jLabel) {

        this.formData.address = ''
        this.formData.address = this.sLabel

      }
      else if (this.sLabel && this.cLabel && !this.qLabel && !this.jLabel) {

        this.formData.address = ''
        this.formData.address = this.sLabel + this.cLabel
      }
      else if (this.sLabel && this.cLabel && this.qLabel && !this.jLabel) {

        this.formData.address = ''
        this.formData.address = this.sLabel + this.cLabel + this.qLabel
      }
      else if (this.sLabel && this.cLabel && this.qLabel && this.jLabel) {

        this.formData.address = ''
        this.formData.address = this.sLabel + this.cLabel + this.qLabel + this.jLabel
      }
      else {

      }

    },
  };
</script>

<style scoped lang="scss">
  #l-map {
    height: 250px;
    width: 100%;
  }

  #r-result {
    width: 100%;
  }

  .szddz {
    width: 130px;
  }

  .czddz {
    width: 130px;
  }

  .qzddz {
    width: 130px;
  }

  .jzddz {
    width: 130px;
  }

  .zhandiandiz {
    position: relative;
    top: -405px;
    left: 70px;
  }

  .zhandiandiz>span {
    margin-right: 10px;
  }
</style>